<template>
  <view class="page">
    <view class="main">
      <up-collapse :border="false">
        <up-collapse-item :title="item.title" :label="item.createTime" v-for="item in messageList" :key="item.title"
          titleStyle="font-size:32rpx;color:#333">
          <template #title>
            <view class="flex align-center">
              <view class="badge" :style="{ backgroundColor: item.isRead ? '#D8D8D8' : '#FF9F19' }"></view>
              <text class="title" :class="{ 'read': item.isRead }">{{ item.title }}</text>
            </view>
          </template>
          <u-text size="26rpx" :color="item.isRead ? '#999999' : '#666666'" :text="item.content"></u-text>
        </up-collapse-item>
      </up-collapse>
    </view>
  </view>

</template>

<script setup>
import { ref } from 'vue';
const messageList = ref([
  {
    title: '日报已生成，点击查看~',
    isRead: false,
    createTime: '2025-01-01',
    content: '张三同学，请本周六上午8点到10点之间在教室二上课，请您准时参加'
  },
  {
    title: '张三同学，已经于20：00离校',
    isRead: true,
    createTime: '2025-01-01 12:00:00',
    content: '张三同学，请本周六上午8点到10点之间在教室二上课，请您准时参加'
  }
]);
const toSendMessage = () => {
  uni.navigateTo({
    url: '/pages/teacher/message/send'
  });
};
</script>

<style scoped lang="scss">
.badge {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10rpx;
}

.title {
  font-size: 32rpx;
  color: #333;

  &.read {
    color: #999999 !important;
  }
}

.btn-send-message {
  background: #EBF3FF;
  padding: 10rpx 20rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6rpx;
  font-size: 24rpx;
  color: #0060E6;
}
</style>